import styles from './index.less';
import { Button, Upload, Input, Image, Empty, message } from 'antd';
import { LegacyRef, RefObject, useEffect, useRef, useState } from 'react';
import PhotoSphereViewer, { Viewer } from 'photo-sphere-viewer';

export default function IndexPage() {
  const [url, setUrl] = useState('');
  const [web, saveWeb] = useState(
    'https://photo-sphere-viewer-data.netlify.app/assets/sphere.jpg',
  );
  const [showRef, setShow] = useState(false);
  const ref = useRef(null);
  const saveImg = () => {
    if (web) {
      setUrl(web);
    } else {
      message.warning('请先输入网络图片地址');
    }
  };
  const load = () => {
    setShow(true);
    console.log(ref.current, Viewer);
    try {
      const viewer = new Viewer({
        // @ts-ignore
        container: ref.current,
        panorama: url,
        caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
        loadingImg:
          'https://photo-sphere-viewer.js.org/assets/photosphere-logo.gif',
        defaultLat: 0.3,
        touchmoveTwoFingers: true,
        mousewheelCtrlKey: true,
      });
    } catch (e) {
      console.error(e);
    }
  };

  return (
    <div className={styles.page}>
      <div style={{ display: showRef ? 'none' : '' }}>
        <h2>需要一张全景图</h2>
        <Image width={200} src={url} />
        <div>
          插入网络图片：
          <Input.Group compact size="small">
            <Input
              size="small"
              value={web}
              onChange={(e) => saveWeb(e.target?.value)}
              className={styles.input}
            />
            <Button type="primary" size="small" onClick={saveImg}>
              确定
            </Button>
          </Input.Group>
        </div>
        <div>
          上传本地图片：
          <Upload
            className={styles.input}
            action="https://5fou.com/file.php"
            showUploadList={false}
            data={{
              name: 'qrcode.jpg',
              uuid: 'o_1fvkotmfh1vpr17ivgs318913tga',
            }}
            beforeUpload={(file) => {
              return new Promise((resolve) => {
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = () => {
                  // @ts-ignore
                  setUrl(reader?.result);
                };
              });
            }}
          >
            <Button size="small">点击上传</Button>
          </Upload>
        </div>
        <div>
          <Button onClick={load}>加载全景图</Button>
        </div>
      </div>
      <div style={{ display: showRef ? '' : 'none' }}>
        <div ref={ref} className={styles.ref} />
        <Button className={styles.backBt} onClick={() => setShow(false)}>
          返回
        </Button>
      </div>
    </div>
  );
}
